<template>
  <q-tabs v-model="tagMenu" :breakpoint="0" active-color="primary" class="tags-view" dense v-bind="tabsAttrs">
    <q-tab v-for="(tag, i) in tagList" :key="`${tag.path}-${i}`" :icon="icon(tag)" :label="tagName(tag)"
           :name="(tag || {}).menuId" @click="clickTab(tag)">
      <q-icon v-if="i !== 0" class="tagView-remove-icon" name="close" @click.prevent.stop="removeTag(tag, i)" />
      <q-popup-proxy anchor="center right" autofocus context-menu self="top middle" touch-position
                     transition-hide="jump-up" transition-show="jump-down">
        <q-list :dense="isDense">
          <q-item v-close-popup clickable>
            <q-item-section @click="removeTags(i, 'left')">{{ $t('CloseLeft') }}</q-item-section>
          </q-item>
          <q-item v-close-popup clickable>
            <q-item-section @click="removeTags(i, 'right')">{{ $t('CloseRight') }}</q-item-section>
          </q-item>
          <q-item v-close-popup clickable>
            <q-item-section @click="removeTags(i, 'other')">{{ $t('CloseOther') }}</q-item-section>
          </q-item>
          <q-item v-close-popup clickable>
            <q-item-section @click="removeTags">{{ $t('CloseAll') }}</q-item-section>
          </q-item>
        </q-list>
      </q-popup-proxy>
    </q-tab>
  </q-tabs>
</template>

<script setup>
import { toI18nName } from 'boot/i18n'
import { tagsStores } from 'stores/tags-stores'
import { userStores } from 'stores/user-stores'
import { computed, inject, nextTick, reactive, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const tabsAttrs = reactive({
  align: 'left', swipeable: true, 'inline-label': true, 'outside-arrows': true, 'mobile-arrows': true, 'no-caps': true
})

const tagsStore = tagsStores()
const handleLoad = inject('handleLoad')
const isDense = inject('isDense', true)

const route = useRoute()
const router = useRouter()
const userStore = userStores()
const tagMenu = ref('Console')
const tagList = computed(() => tagsStore.tags)
const icon = computed(() => (meta = {}, icon = 'insert_chart') => meta.menuIcon || icon)

const initTagMenu = () => (tagMenu.value = route.meta?.menuId || 'Console')
const tagName = (tag = {}) => tag[toI18nName('menuZhCn')] || tag.title
watch(() => route.path, () => initTagMenu(), { immediate: true })

const skipService = tag => {
  if (['/dashboard/worktable', '/dashboard/console', '/dashboard/wizardCfg', '/'].includes(tag.path)) return
  if (userStore.breadcrumbs.id !== tag.serviceId) {
    const serve = (userStore.serviceList || []).find(el => el.id === tag.serviceId) || {}
    userStore.SET_BREADCRUMBS(serve)
  }
}

const clickTab = tag => {
  if (tag.path === route.fullPath) return
  handleLoad(true)
  nextTick(async () => {
    await router.replace(tag.path)
    handleLoad(false)
    skipService(tag)
  })
}
const removeTag = (tag, i) => {
  if (tag.path !== route.fullPath || tag.menuId !== (route.meta || {}).menuId) return tagsStore.REMOVE_TAGS(i)
  router.push(tagList.value[i - 1].path)
  skipService(tagList.value[i - 1])
  tagsStore.REMOVE_TAGS(i)
}
const removeTags = (index, side) => {
  const tagIndex = tagList.value.findIndex(el => el.path === route.fullPath)
  if (tagIndex > index) {
    if (side === 'left') return tagsStore.REMOVE_TAGS({ index, side })
    if (['right', 'other'].includes(side)) {
      router.push(tagList.value[index].path)
      skipService(tagList.value[index])
      tagsStore.REMOVE_TAGS({ index, side })
      return
    }
    router.push(tagList.value[0].path)
    skipService(tagList.value[0])
    tagsStore.REMOVE_TAGS(undefined)
    return
  }
  if (tagIndex === index) {
    if (side) tagsStore.REMOVE_TAGS({ index, side })
    else tagsStore.REMOVE_TAGS(undefined)
    return
  }
  if (side === 'right') return tagsStore.REMOVE_TAGS({ index, side })
  if (['left', 'other'].includes(side)) {
    router.push(tagList.value[index].path)
    skipService(tagList.value[index])
    tagsStore.REMOVE_TAGS({ index, side })
    return
  }
  router.push(tagList.value[0].path)
  skipService(tagList.value[0])
  tagsStore.REMOVE_TAGS(undefined)
}

</script>